<template>
	<div class="main" ref="scrollMain">
		<Tabs v-model="tabValue" type="top-fixed" style="background:#FFF;">
			<TabPane @change="load" name="0"  label="全部" ></TabPane>
			<TabPane @change="load" name="1"  label="进行中" ></TabPane>
			<TabPane @change="load" name="2"  label="已结束" ></TabPane>
		</Tabs>
		<div>
			<div class="guess-list">
				<router-link :to="'/chasingdetail/'+item.id"   v-for="item in list">
					<Listitem class="align-center guess-item">
						<template slot="left">
							<img class="icon" v-if="item.lottery_name=='时时猜'" src="@/assets/yl_img1.png" />
							<img class="icon" v-else src="@/assets/yl_img2.png" />
						</template>
						<template slot="center">
							<div class="ml-24">
								<div class="ft-32 ">
									<span class="ft-b">{{item.lottery_name}}</span><span class="chasing-num">追{{item.nper}}期</span>
								</div>
								<div class="ft-28 guess-price">
									<span>{{item.lottery_play_name}}</span>
								</div>
							</div>
						</template>
						<template slot="right">
							<div>
								<div class="chasing-num-item" v-for="item1 in item.selonArr">{{item1}}</div>
							</div>
						</template>
					</Listitem>
				</router-link>
				<div v-show="loadingmore" class="loadmore">正在加载...</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Tabs from '@/components/tabs';
	import TabPane from '@/components/tabPane';
	import Listitem from "@/components/list-item";
	import {getChasingList} from "@/api/home";

	export default{
		components:{
			Tabs,
			TabPane,
			Listitem
		},
		data(){
			return {
				tabValue:"0",
				page:1,
				loadingmore:false,
				total:0,
				list:[],
				nowLen:0
			}
		},
		mounted(){
			this.startY=0;
			document.addEventListener('touchstart',this.touchstart,false);
			document.addEventListener('touchmove',this.scroll,false);
		},
		beforeDestroy(){
			document.removeEventListener('touchmove',this.scroll,false);
			document.removeEventListener('touchstart',this.touchstart,false);
		},
		methods:{
			touchstart(e){
				this.startY=e.touches[0].pageY;
			},
			load(type){
				this.list=[];
				this.nowLen=0;
				this.total=0;
				this.page=1;
				this.loadingmore=false;
				this.getChasingList();
			},
			scroll(e){
				let self=this;
				if (this.nowLen<this.total&& !this.loadingmore) {
					let scrollTop=document.body.scrollTop;
					let clientheight=this.$refs.scrollMain.clientHeight;
					let winheight=window.innerHeight;
					if (clientheight-scrollTop<winheight+20) {
						let nowy=e.touches[0].pageY;
						if (nowy<self.startY) {
							e.preventDefault();
						}
						this.page++;
						this.loadingmore=true;
						this.getChasingList();
					}
				}
			},
			getChasingList(){
				let tabValue=this.tabValue;
				getChasingList(this.tabValue,this.page).then(res=>{
					if (tabValue==this.tabValue) {
						if (res.code==1) {
							let list=res.data.list;
							list.forEach(item=>{
								item.selonArr=item.selon?item.selon.split(','):[];
								//item.selonArr=["大","小","和","双","牛"];
								let length=item.selonArr.length;
								if (length>4) {
									item.selonArr.splice(3,length-3);
									item.selonArr.push('...');
								}
							})

							this.nowLen+=list.length;
							this.total=res.data.total;
							this.list=this.list.concat(res.data.list);

						}
						this.loadingmore=false;
					}
				});
			}
		}
	}
</script>
<style scoped>
	.main .icon {
		width: 84px;
		height: 84px;
	}
	.guess-list{padding-left: 40px;}

	.chasing-num{display: inline-block;padding: 4px 16px;margin-left:10px ;font-size: 22px;background: #FFF5DD;border-radius: 200px;color: #FF9F03;vertical-align: top}
	.chasing-num-item{display: inline-block;width: 56px;height: 56px;line-height: 56px;margin-right: 16px;border:1px solid #FD4658 ;color: #FD4658 ;text-align: center;border-radius: 50%;font-size: 20px; }
</style>